import React from 'react'
import axios from 'axios'
import Appson from '../page1/appson'
import {useEffect,useState,useRef,useMemo} from "react"
import Style from "../style/shopcar.module.css"
function App() {
  let [sumzong,setSumzong] = useState(0)
  let [checkall,setCheckAll] = useState(false)
  let [arr,setArr] = useState([])
  let arrRef = useRef(arr)
  let [name,setName] = useState("zhangsan")
  let nameRef = useRef(name)
  nameRef.current = name
  arrRef.current = arr
  useEffect(()=>{
      axios.get("/shoplist").then(res=>{
          setArr(res.data)
         setTimeout(()=>{  console.log(arrRef.current,"ref");},20)
      })
  },[])
  useEffect(()=>{
    console.log(arr);
    sumFn()
  },[arr])
  let checkitem = (e,ind)=>{ // 控制每一个得选中与不选中和反选的事件
        console.log(ind);
        console.log(e);
        let crr = arr.map((item,index)=>{
            if(ind == index) {
                item.flag = e.target.checked
            }
            return item
        })
        setArr(crr)
       let ischeckall =  crr.every((item,index)=>{
            return item.flag
        })
        setCheckAll(ischeckall)

  }
  let checkAll = (e)=>{ // 全选得事件
       console.log(e);
       // setCheckAll(!checkall)  setXXX后拿到不是最新的值
        setCheckAll(e.target.checked) // 
        
        setTimeout(()=>{
            console.log(checkall);
            let crr = arr.map((item,index)=>{
                 // item.flag = checkAll
                item.flag = e.target.checked
                return item
            })
            setArr(crr)
        },50)
  } 
  useEffect(()=>{
      console.log(checkall,111111);
  },[])
  let addfn = (ind)=>{  // 购物车加加
     let newArr =  arr.map((item,index)=>{
         if (index === ind) {
             item.num++
         }
         return item
     })
     setArr(newArr)
  
  }
  let delfn = (ind)=>{
    let newArr =  arr.map((item,index)=>{
        if (index === ind) {
            item.num--
            if (item.num <= 0) {
                item.num = 0
                alert("您不能在减了")
            }
        }
        return item
    })
    setArr(newArr)
  }
  let sumFn = ()=>{
      let sumzong = arr.reduce((a,b)=>{
          if (b.flag) {
              return a + b.price * b.num
          } else {
              return a
          }
      },0)
      setSumzong(sumzong)
  }
  let setname = ()=>{ // 在这个函数中无法拿到setXXX后的最新值
      setName("lisi")
      setTimeout(()=>{ console.log(name,111);console.log( nameRef.current)},200)
   
  }
  return (
    <div>
        <button onClick={setname}>修改name</button> <span>{name}</span>
        <div>全选： <input type="checkbox" checked={checkall} onChange={checkAll} /> 总价{sumzong}</div>
        {
            arr && arr.length ? arr.map((item,index)=>{
                return <div key={index} className={Style.wrap}>
                   <div>
                       <img src={item.img} alt="" />
                   </div>
                    <div>
                        <h4>标题:{item.title} 价格：{item.price}</h4>
                        <div><button onClick={()=>{delfn(index)}}>--</button>{item.num}<button onClick={()=>{addfn(index)}}>++</button></div>
                        <input type="checkbox" checked={item.flag} onChange={(e)=>checkitem(e,index)} />
                    </div>
                </div>
            }):"暂无数据"

        }
        <hr />
        <Appson></Appson>
    </div>
  )
}

export default App